<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>


	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target="#myNavbar">
					<span class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">WebSiteName</a>
			</div>
			<div class="collapse navbar-collapse" id="myNavbar">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">Home</a></li>
					<li class="dropdown"><a class="dropdown-toggle"
						data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
						<ul class="dropdown-menu">
							<li><a href="#">Page 1-1</a></li>
							<li><a href="#">Page 1-2</a></li>
							<li><a href="#">Page 1-3</a></li>
						</ul></li>
					<li><a href="#">Page 2</a></li>
					<li><a href="#">Page 3</a></li>
				</ul>
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#"><span class="glyphicon glyphicon-user"></span>
							Sign Up</a></li>
					<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>
							Login</a></li>
				</ul>
			</div>
		</div>
	</nav>


	<div class="container">
		<div class="jumbotron">
			<h1>My first Bootstrap website!</h1>
			<p>This page will grow as we add more and more components from
				Bootstrap...</p>
			<a href="#" class="btn btn-info btn-lg"> <span
				class="glyphicon glyphicon-search"></span> Search
			</a>
		</div>
	</div>

	<div class="container">
		<ul class="nav nav-tabs">
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#">Menu 1</a></li>
			<li><a href="#">Menu 2</a></li>
			<li><a href="#">Menu 3</a></li>
		</ul>
	</div>


	<div class="container">
		<ul class="nav nav-tabs">
			<li class="active"><a href="#">Home</a></li>
			<li class="dropdown"><a class="dropdown-toggle"
				data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a>
				<ul class="dropdown-menu">
					<li><a href="#">Submenu 1-1</a></li>
					<li><a href="#">Submenu 1-2</a></li>
					<li><a href="#">Submenu 1-3</a></li>
				</ul></li>
			<li><a href="#">Menu 2</a></li>
			<li><a href="#">Menu 3</a></li>
		</ul>
	</div>



	<!-- <div class="container"> -->
	<!--   <ul class="nav nav-pills"> -->
	<!--     <li class="active"><a href="#">Home</a></li> -->
	<!--     <li><a href="#">Menu 1</a></li> -->
	<!--     <li><a href="#">Menu 2</a></li> -->
	<!--     <li><a href="#">Menu 3</a></li> -->
	<!--   </ul> -->
	<!-- </div> -->


	<!-- <div class="col-md-3"> -->
	<!--   <ul class="nav nav-pills nav-stacked"> -->
	<!--     <li class="active"><a href="#">Home</a></li> -->
	<!--     <li><a href="#">Menu 1</a></li> -->
	<!--     <li><a href="#">Menu 2</a></li> -->
	<!--     <li><a href="#">Menu 3</a></li> -->
	<!--   </ul> -->
	<!-- </div> -->

	<ul class="nav nav-pills nav-stacked">
		<li class="active"><a href="#">Home</a></li>
		<li class="dropdown"><a class="dropdown-toggle"
			data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a>
			<ul class="dropdown-menu">
				<li><a href="#">Submenu 1-1</a></li>
				<li><a href="#">Submenu 1-2</a></li>
				<li><a href="#">Submenu 1-3</a></li>
			</ul></li>
		<li><a href="#">Menu 2</a></li>
		<li><a href="#">Menu 3</a></li>
	</ul>


	<div class="container-fluid">
		<p>This is a paragraph.</p>
		<p>This is another paragraph.</p>
		<p>This is a paragraph.</p>
		<p>This is another paragraph.</p>
	</div>

	<div class="container">
		<div class="row">
			<div class="col-md-3">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
					do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
			</div>
			<div class="col-md-6">
				<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
					laboris nisi ut aliquip ex ea commodo consequat.</p>
				<p>Sed ut perspiciatis unde omnis iste natus error sit
					voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
			</div>
			<div class="col-md-3">
				<p>Eaque ipsa quae ab illo inventore veritatis et quasi
					architecto beatae vitae dicta sunt explicabo.</p>
			</div>
		</div>
	</div>

	<div class="table-responsive">
		<table class="table">
			<tr>
				<th>col1</th>
				<th>col2</th>
				<th>col3</th>
			</tr>

			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
		</table>
	</div>

	<button type="button" class="btn btn-info" data-toggle="collapse"
		data-target="#demo">Simple collapsible</button>

	<div id="demo" class="collapse in">Lorem ipsum dolor sit amet,
		consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
		labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
		exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
	</div>

	<script
		src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script
		src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>